<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .level2 {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: rgb(15, 86, 238);
            text-align: center;
        }

        .level3 {
            width: 150px;
            height: 150px;
            margin: 50px auto;
            background-color: rgb(240, 8, 248);
            line-height: 150px;
        }
    </style>
    <script>
        window.onload = function () {
            const level3Obj = document.querySelector(".level3");
            const level2Obj = document.querySelector(".level2");
            /* 
                冒泡：当元素嵌套绑定时间的时候，会产生冒泡。会从事件的最底层元素开始逐渐向上执行。
                冒泡时参数默认为false
            */
            // level3Obj.addEventListener("click", function () {
            //     alert("level3");
            // }, false);

            // level2Obj.addEventListener("click", function () {
            //     alert("level2");
            // }, false);

            /* 
                捕获：会从事件的最顶层开始执行
                捕获时参数为true
            */
            level3Obj.addEventListener("click", function () {
                alert("level3");
            }, true);

            level2Obj.addEventListener("click", function () {
                alert("level2");
            }, true);

            document.addEventListener("click", function () {
                alert("document");
            }, true);

        }
    </script>
</head>

<body>
    <div class="level2">
        <div class="level3">事件的冒泡</div>
    </div>
</body>

</html>